<template>
    <el-dialog title="添加员工" :visible.sync="showAddStaff" top="3%" width="55%" :before-close="addStaffCloseFn" :close-on-click-modal="false">
        <el-row>
            <el-col :span="12" class="madp-dialog-left">
                <el-input class="form-top" v-model.trim="dialogSearchT" placeholder="请输入关键词过滤" show-word-limit maxlength="20">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-tree
                    ref="tree2"
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    node-key="treeId"
                    :highlight-current="true"
                    :filter-node-method="filterNode"
                    :expand-on-click-node="false"
                    :default-expand-all="false"
                    :load="loadNode"
                    lazy
                    @node-click="handleNodeClick2"
                >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span class="tree-node-icon">
                            <i v-if="data.leaf" class="el-icon-s-custom"></i>
                            <i v-else class="el-icon-office-building"></i>
                        </span>
                        <span>{{ node.label }}</span>
                        <span v-show="showCheck(data.id, data.leaf)" class="madp-tree-check">
                            <i class="el-icon-check"></i>
                        </span>
                    </span>
                </el-tree>
            </el-col>
            <el-col class="madp-list-right" :offset="1" :span="11">
                <p class="desc-top">已选择的部门、成员</p>
                <div class="content">
                    <div :key="tag.name" v-for="tag in curList" class="madp-tag-item">
                        <el-tag closable :disable-transitions="false" @close="handleClose(tag)">{{ tag.name }}</el-tag>
                    </div>
                </div>
            </el-col>
        </el-row>
        <p>提示：选择机构/条线表示机构/条线下成员都订阅数据，选择成员只支持从机构下选择</p>
        <span slot="footer">
            <el-button @click="handleUpdate" type="primary">确定</el-button>
            <el-button @click="addStaffCloseFn">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { fetchTree } from '@/api/admin/dept';
import { memberByDepartmentList2 } from '@/api/common-interface/department';
export default {
    name: 'addStaff',
    data() {
        return {
            dialogSearchT: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            },
            selectUserIds: [], // 人员id
            selectLineDeptIds: [], // 部门id
            initData: {}
        };
    },
    props: [
        // dialog显示、隐藏
        'showAddStaff',
        'receivingEmployees'
    ],
    watch: {
        dialogSearchT(val) {
            this.$refs.tree2.filter(val);
        },
        searchT(val) {
            this.$refs.tree.filter(val);
        }
    },
    computed: {
        curList() {
            return [...this.selectLineDeptIds, ...this.selectUserIds];
        }
    },
    created() {
        this.init();
    },
    mounted() {
        this.initData = JSON.parse(JSON.stringify(this.receivingEmployees));
        this.selectUserIds = this.receivingEmployees.userIds || [];
        this.selectLineDeptIds = this.receivingEmployees.deptIds || [];
    },
    methods: {
        init() {
            fetchTree().then((response) => {
                let data = response.data.data;
                data = this.reduceArr(data);
                this.treeData = data;
            });
        },
        reduceArr(data) {
            data = data.map((i) => {
                i.treeId = i.id + i.name;
                if (i.children && i.children.length > 0) {
                    i.children = this.reduceArr(i.children);
                }
                return i;
            });
            return data;
        },
        showCheck(id, leaf) {
            let arr = leaf ? this.selectUserIds : this.selectLineDeptIds;
            let flag = arr.some((i) => {
                if (i.id === id) {
                    return true;
                }
            });
            return flag;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        loadNode(node, resolve) {
            if (node.data.id) {
                let id = node.data.id;
                memberByDepartmentList2(id).then((response) => {
                    if (response.data.code === 0) {
                        // 只返回了用户的数据
                        let arr1 = response.data.data.map((i) => {
                            let obj = {
                                leaf: true,
                                name: i.name,
                                id: i.userId,
                                treeId: i.userId + i.name,
                                username: i.username
                            };
                            return obj;
                        });
                        // 合并到当前部门下的部门
                        let arr = [...arr1, ...node.data.children];
                        resolve(arr);
                    }
                });
            }
        },
        handleNodeClick2(data) {
            let { name, id, username } = data,
                keyArr = ['selectLineDeptIds', 'selectUserIds'];
            this.changeList(keyArr[Number(Boolean(data.leaf))], {
                name,
                id,
                username
            });
        },
        changeList(key, obj) {
            let index = -1,
                flag = this[key].some((i, idx) => {
                    if (i.id === obj.id) {
                        index = idx;
                        return true;
                    }
                });
            if (flag) {
                this[key].splice(index, 1);
            } else {
                this[key].push(obj);
            }
        },
        handleClose(data) {
            let index = -1;
            let flag = this.selectLineDeptIds.some((i, idx) => {
                if (i.id === data.id && i.name === data.name) {
                    index = idx;
                    return true;
                }
            });
            if (flag) {
                this.selectLineDeptIds.splice(index, 1);
            } else {
                this.selectUserIds.some((i, idx) => {
                    if (i.id === data.id) {
                        index = idx;
                        return true;
                    }
                });
                if (index > -1) this.selectUserIds.splice(index, 1);
            }
        },
        handleUpdate() {
            let list = {
                userIds: this.selectUserIds,
                deptIds: this.selectLineDeptIds
            };
            this.$emit('addStaffconfirmFn', list);
        },
        addStaffCloseFn() {
            this.$emit('addStaffCloseFn', this.initData);
        }
    }
};
</script>

<style scoped lang="scss">
.form-top {
    position: fixed;
    width: 24%;
    z-index: 999;
}
.madp-dialog-left {
    height: 550px;
    overflow: auto;
}
.madp-list-right {
    height: 550px;
    overflow-y: auto;
    p {
        color: #787878;
        font-size: 14px;
    }
    .desc-top {
        position: fixed;
        overflow: hidden;
        z-index: 999;
        background: #fff;
        width: 25%;
    }
    .content {
        margin-top: 40px;
    }
}
.madp-checkbox-head {
    width: 100%;
    height: 60px;
    line-height: 60px;
}
.madp-checkbox-item {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 1px solid #000;
}
.filter-tree {
    margin-top: 40px;
}
.madp-tag-item {
    margin-top: 2px;
}
.madp-tree-check {
    display: inline-block;
    padding-left: 10px;
}
.el-dialog__body {
    font-size: 16px;
}
.tree-node-icon {
    display: inline-block;
    margin-right: 4px;
    font-size: 20px;
    color: #ed5555;
}
</style>
